<template>
  <a-popover v-model:visible="visible" placement="bottomLeft" trigger="click">
    <template #title>
      <a-form-item><a-input v-model:value="search" /></a-form-item>
    </template>
    <template #content>
      <div class="icons">
        <div v-for="(i, index) in iconAll" :key="index" @click="choiceIcon(i)">
          <Icon :class="['icon', { active: activeName === i }]" :icon="i" />
        </div>
      </div>
    </template>
    <a-input v-model:value="activeName" />
  </a-popover>
</template>

<script setup lang="tsx">
import iconAll from "@/assets/icon-all";
import { ref } from "vue";
import { Icon } from "@iconify/vue";
import { useVModels } from "@vueuse/core";
type PropType = {
  activeName: string;
  search: string;
};
const prop = defineProps<PropType>();
let emits = defineEmits(["update:activeName"]);

const { activeName, search } = useVModels(prop, emits);

const choiceIcon = (name: string) => {
  activeName.value = name;
};
const visible = ref<boolean>(false);
</script>

<style lang="less" scoped>
.icons {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 150px;
  overflow-y: auto;
  .icon {
    margin: 2px;
    font-size: 40px;
    border: 1px solid gray;
    cursor: pointer;
  }
}
.active {
  color: #1890ff;
}
</style>
